﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabBar Test Page</title>
<script src="dollar.js"></script>
<script src="TabScroller.js"></script>
<style>
body{
	font-size: 12px;
}
</style>
</head>
<body>
	<div style="width:500px;height:25px;border:1px solid #000;margin:10px auto">
		<div id="slider" style="position:relative;left:0px;width:100px;height:20px;background:#ccc">hello</div>
	</div>
	<span id="cmd_slider" style="cursor:pointer;color:green">滑动吧~</span>
	<script>
		var slider = $('#slider');
		$('#cmd_slider').click(function(){
			slider.horMoveBy((Math.floor(Math.random() * 2) > 0 ? 1 : -1) * Math.ceil(Math.random() * 300));	
		});
	</script>
	<style>
		.clear{clear:both}
		.tabbar_cnt {width:540px;height:28px;border-bottom:2px solid #000}
		.tabbar_box{width:2000px;position:relative;left:0}
		.tab {background:#ccc;height:25px;border:1px solid #000;border-bottom:2px solid #000;line-height:25px;float:left;margin-left:2px;padding:0 20px}
		.tabbar_box .active{background:#fff;border-bottom:2px solid #fff}
		.disabled{color:#ccc}
	</style>
	<div class="tabbar_cnt">
		<div style="position:relative;top:2px;height:28px;width:430px;overflow:hidden;float:left">
		<div class="tabbar_box">
		<div class="tab">家有儿女7</div>
		<div class="tab">家有儿女第6部</div>
		<div class="tab active">家有儿女5</div>
		<div class="tab">家有儿女4</div>
		<div class="tab">家有儿女3</div>
		<div class="tab">家有儿女第2部</div>
		<div class="tab">家有儿女1</div>
		<div class="clear"></div>
		</div>
		</div>
		<div style="float:left;line-height:25px">
			&nbsp;
			<a  id="prebtn" href="javascript:tb1.pre()">&lt;&lt;</a>&nbsp;
			<a id="nextbtn" href="javascript:tb1.next()">&gt;&gt;</a>
		</div>
	</div>
	<div>
			<label>转换函数：</label>
			<select id="trans_set">
				<option>linear</option>
				<option>sinoidal</option>
				<option>reverse</option>
<option>flicker</option>
<option>wobble</option>
<option>pulse</option>
			</select>
			<label>动画时间：</label>
			<select id="duration_set">
				<option>0.5</option>
				<option>1</option>
				<option>1.5</option>
<option>2</option>
<option>2.5</option>
<option>3</option>
			</select>
		</div>
	<div class="tabbar_cnt">
		<div style="position:relative;top:2px;height:28px;width:430px;overflow:hidden;float:left">
		<div class="tabbar_box">
		<div class="tab">家有儿女7</div>
		<div class="tab">家有儿女第6部</div>
		<div class="tab active">家有儿女5</div>
		<div class="tab">家有儿女4</div>
		<div class="tab">家有儿女3</div>
		<div class="tab">家有儿女第2部</div>
		<div class="tab">家有儿女1</div>
		<div class="clear"></div>
		</div>
		</div>
		<div style="float:left;line-height:25px">
			&nbsp;
			<a href="javascript:tb2.pre()">&lt;&lt;</a>&nbsp;
			<a href="javascript:tb2.next()">&gt;&gt;</a>
		</div>
	</div>
	
	<div class="tabbar_cnt">
		<div style="position:relative;top:2px;height:28px;width:430px;overflow:hidden;float:left">
		<div class="tabbar_box">
		<div class="tab">家有儿女7</div>
		<div class="tab">家有儿女第6部</div>
		<div class="tab active">家有儿女5</div>
		<div class="tab">家有儿女4</div>
		<div class="tab">家有儿女3</div>
		<div class="tab">家有儿女第2部</div>
		<div class="tab">家有儿女1</div>
		<div class="clear"></div>
		</div>
		</div>
		<div style="float:left;line-height:25px">
			&nbsp;
			<a href="javascript:tb3.pre()">&lt;&lt;</a>&nbsp;
			<a href="javascript:tb3.next()">&gt;&gt;</a>
		</div>
	</div>
	
	<script>
		var tb1 = new $.TabScroller({
			$limit : $('.tabbar_cnt[0] > div[0]'),
			$long : $(".tabbar_cnt[0] .tabbar_box"),
			$tabs: $(".tabbar_cnt[0] .tab"),
			useEffect: true,
			mode: 'group',
			effectSets: {duration:2},
			navBtnsInfo : {
				$pre : $('.tabbar_cnt[0] > div[1] a[0]'),
				$next : $('.tabbar_cnt[0] > div[1] a[1]'),
				disabledClass : 'disabled'
			}
		});
		$('#trans_set').change(function(){
			var fun = this.options[this.selectedIndex].text;
			tb1.sets.effectSets.transition = $[fun];
		},true);
		$('#duration_set').change(function(){
			var du = this.options[this.selectedIndex].text;
			tb1.sets.effectSets.duration = parseFloat(du);	
		}, true);
		var tb2 = new $.TabScroller({
			$limit : $('.tabbar_cnt[1] > div[0]'),
			$long : $(".tabbar_cnt[1] .tabbar_box"),
			$tabs: $(".tabbar_cnt[1] .tab"),
			useEffect: true,
			navBtnsInfo : {
				$pre : $('.tabbar_cnt[1] > div[1] a[0]'),
				$next : $('.tabbar_cnt[1] > div[1] a[1]'),
				disabledClass : 'disabled'
			}
		});
		
		var tb3 = new $.TabScroller({
			$limit : $('.tabbar_cnt[2] > div[0]'),
			$long : $(".tabbar_cnt[2] .tabbar_box"),
			$tabs: $(".tabbar_cnt[2] .tab"),
			useEffect: true,
			mode: 'group',
			hideMode:true
		});
	</script>
</body>
</html>